<template>
  <div :device="device">
    <el-row v-for="(item, index) in device.axis" :key="index">
      <el-col :span="10">
        <div class="chart-container">
          <chart :id="index" height="200px" width="200px" :value="item.start" />
        </div>
      </el-col>
      <el-col :span="14">
        <el-form ref="form" label-width="80px">
          <el-form-item label="轴名称">
            {{ item.name }}
          </el-form-item>
          <el-form-item label="当前位置">
            {{ item.start }}
          </el-form-item>
          <el-form-item label="目标位置">
            <el-col :span="12">
              <el-input-number v-model="item.end" size="small" placeholder="输入目标位置" />
            </el-col>
            <el-col :span="12">
              <el-select v-model="item.end" clearable placeholder="请选择" size="small">
                <el-option
                  v-for="opt in item.positions"
                  :key="opt"
                  :label="opt"
                  :value="opt"
                />
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="操作">
            <el-button size="mini" type="success" @click="onMove(item)"> 移动 </el-button>
            <el-button size="mini" type="danger" @click="onStop(item)"> 停止 </el-button>
            <el-button size="mini" type="primary" @click="onGet(item)"> 获取 </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Chart from './Charts/GuageCircle'

export default {
  name: 'CircleAxis',
  components: { Chart },
  props: {
    id: {
      type: Number,
      default: 0
    },
    device: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      data: null
    }
  },
  watch: {
    device: {
      deep: true,
      handler(val) {
        this.device = val
      }
    }
  },
  created() {
    this.data = this.device
  },
  methods: {
    onMove(axis) {
      var message = {
        code: axis.move_code.toString(),
        msg: axis.end.toString()
      }
      this.publish(this.data.sub, JSON.stringify(message))
    },
    onStop(axis) {
      var message = {
        code: axis.stop_code.toString(),
        msg: axis.end.toString()
      }
      this.publish(this.data.sub, JSON.stringify(message))
    },
    onGet(axis) {
      console.log(axis)
      var message = {
        code: axis.get_position_code.toString(),
        msg: axis.end.toString()
      }
      this.publish(this.data.sub, JSON.stringify(message))
    },
    publish(topic, message) {
      console.log('推送消息')
      console.log('topic:' + topic)
      console.log('message:' + message)
      this.$mqtt.publish(topic, message)
    }

  }
}
</script>

<style lang="scss" scoped>

  .dashboard-editor-container {
    background-color: #e3e3e3;
    min-height: 100vh;
    padding: 50px 60px 0px;
  }
</style>
